<template>
  <div class="awards-container">
    <h2 class="section-title">荣誉奖项</h2>
    
    <div class="awards-filter">
      <div class="filter-group">
        <span class="filter-label">年份筛选：</span>
        <select v-model="yearFilter">
          <option value="all">全部</option>
          <option v-for="year in availableYears" :key="year" :value="year">{{ year }}年</option>
        </select>
      </div>
      
      <div class="filter-group">
        <span class="filter-label">类型筛选：</span>
        <select v-model="typeFilter">
          <option value="all">全部</option>
          <option value="科技奖项">科技奖项</option>
          <option value="企业荣誉">企业荣誉</option>
          <option value="项目奖励">项目奖励</option>
        </select>
      </div>
    </div>
    
    <div class="awards-timeline">
      <div v-for="(year, yearIndex) in filteredAwards" :key="yearIndex" class="year-group">
        <div class="year-marker">
          <span class="year-label">{{ yearIndex }}</span>
        </div>
        
        <div class="awards-list">
          <div v-for="(award, awardIndex) in year" :key="awardIndex" class="award-card">
            <div class="award-icon">
              <i :class="getAwardIcon(award.type)"></i>
            </div>
            <div class="award-content">
              <h3>{{ award.title }}</h3>
              <p class="award-level">{{ award.level }}</p>
              <p class="award-date">{{ award.date }}</p>
              <p class="award-desc">{{ award.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <div v-if="Object.keys(filteredAwards).length === 0" class="no-results">
        <p>没有找到符合条件的奖项</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Awards',
  data() {
    return {
      yearFilter: 'all',
      typeFilter: 'all',
      awards: [
        {
          title: "智能交通系统优秀工程奖",
          level: "国家级",
          type: "项目奖励",
          date: "2022-11-15",
          year: "2022",
          description: "基于AI的城市交通信号优化控制系统项目，获得国家级智能交通系统优秀工程奖。"
        },
        {
          title: "交通科技进步奖",
          level: "省级二等奖",
          type: "科技奖项",
          date: "2022-09-05",
          year: "2022",
          description: "城市交通大数据分析与应用技术研究项目，荣获省级科技进步二等奖。"
        },
        {
          title: "智慧城市建设先进单位",
          level: "市级",
          type: "企业荣誉",
          date: "2022-01-18",
          year: "2022",
          description: "在智慧城市建设领域的突出贡献，被评为市级智慧城市建设先进单位。"
        },
        {
          title: "科技创新企业",
          level: "省级",
          type: "企业荣誉",
          date: "2021-12-10",
          year: "2021",
          description: "在交通科技领域的持续创新，被评为省级科技创新企业。"
        },
        {
          title: "交通行业数字化建设优秀案例",
          level: "行业协会",
          type: "项目奖励",
          date: "2021-08-25",
          year: "2021",
          description: "高速公路数字孪生系统项目，被评为交通行业数字化建设优秀案例。"
        },
        {
          title: "智能交通科技奖",
          level: "国家级三等奖",
          type: "科技奖项",
          date: "2021-05-20",
          year: "2021",
          description: "基于车路协同的交通信号控制关键技术研究项目，荣获国家级智能交通科技三等奖。"
        },
        {
          title: "交通运输信息化优秀解决方案",
          level: "行业协会",
          type: "项目奖励",
          date: "2020-11-12",
          year: "2020",
          description: "城市公共交通智能化解决方案，获得交通运输信息化优秀解决方案奖。"
        },
        {
          title: "科技创新团队",
          level: "市级",
          type: "企业荣誉",
          date: "2020-07-08",
          year: "2020",
          description: "公司智能交通研发团队，被评为市级科技创新团队。"
        },
        {
          title: "交通科技进步奖",
          level: "省级一等奖",
          type: "科技奖项",
          date: "2019-12-15",
          year: "2019",
          description: "交通大数据分析与挖掘关键技术研究项目，荣获省级交通科技进步一等奖。"
        }
      ]
    };
  },
  computed: {
    availableYears() {
      const years = this.awards.map(award => award.year);
      return [...new Set(years)].sort((a, b) => b - a);
    },
    filteredAwards() {
      let filtered = this.awards;
      
      if (this.yearFilter !== 'all') {
        filtered = filtered.filter(award => award.year === this.yearFilter);
      }
      
      if (this.typeFilter !== 'all') {
        filtered = filtered.filter(award => award.type === this.typeFilter);
      }
      
      // Group by year
      const groupedByYear = {};
      filtered.forEach(award => {
        if (!groupedByYear[award.year]) {
          groupedByYear[award.year] = [];
        }
        groupedByYear[award.year].push(award);
      });
      
      // Sort years descending
      return Object.fromEntries(
        Object.entries(groupedByYear).sort(([yearA], [yearB]) => yearB - yearA)
      );
    }
  },
  methods: {
    getAwardIcon(type) {
      switch(type) {
        case '科技奖项':
          return 'fas fa-award';
        case '企业荣誉':
          return 'fas fa-trophy';
        case '项目奖励':
          return 'fas fa-medal';
        default:
          return 'fas fa-star';
      }
    }
  }
};
</script>

<style scoped>
.awards-container {
  padding: 20px 0;
}

.section-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eaeaea;
}

.awards-filter {
  display: flex;
  margin-bottom: 30px;
  gap: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.filter-group {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 10px;
  font-size: 14px;
  color: #555;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: white;
  color: #333;
  cursor: pointer;
}

.awards-timeline {
  position: relative;
}

.awards-timeline:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25px;
  width: 2px;
  background-color: #ddd;
  z-index: 0;
}

.year-group {
  margin-bottom: 40px;
  position: relative;
}

.year-marker {
  position: relative;
  margin-bottom: 20px;
  z-index: 1;
}

.year-label {
  display: inline-block;
  padding: 5px 15px;
  background-color: #0056b3;
  color: white;
  border-radius: 20px;
  font-weight: 500;
}

.awards-list {
  padding-left: 50px;
}

.award-card {
  display: flex;
  margin-bottom: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.award-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.award-icon {
  flex: 0 0 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f8ff;
  color: #0056b3;
  font-size: 24px;
}

.award-content {
  flex: 1;
  padding: 20px;
}

.award-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.award-level {
  display: inline-block;
  padding: 3px 8px;
  background-color: #e6f7ff;
  color: #0056b3;
  border-radius: 4px;
  font-size: 12px;
  margin-bottom: 10px;
}

.award-date {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.award-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.no-results {
  padding: 40px 0;
  text-align: center;
  color: #666;
  font-size: 16px;
}

@media (max-width: 768px) {
  .awards-filter {
    flex-direction: column;
    gap: 15px;
  }
  
  .awards-timeline:before {
    left: 20px;
  }
  
  .awards-list {
    padding-left: 40px;
  }
  
  .award-card {
    flex-direction: column;
  }
  
  .award-icon {
    padding: 15px 0;
  }
}
</style> 